<template>
  <ui-container>
    <span class="header-title">{{ headerTitle }}</span>
    <vx-title-bar current="2"></vx-title-bar>
    <single-transfer :obj="payer" />
    <div class="justify-center mg-top-20">
      <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
      <ui-button :loading="isLoading" class="primary-long-btn" @click="onSubmit()">提交</ui-button>
    </div>
    <ui-dialog title="ukey密码验证" center :visible.sync="showUkey" width="600px" class="ukeyDialog">
      <ui-input v-model="ukeyValue" type="password" placeholder="请输入ukey密码"></ui-input>
      <span slot="footer" class="dialog-footer">
        <ui-button class="default-btn" @click="showUkey = false">取消</ui-button>
        <ui-button class="primary-long-btn" @click="verification" :loading="isLoading">确定</ui-button>
      </span>
    </ui-dialog>
  </ui-container>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { judgeOneEnv, verifyPIN, usbKeySignData } from '@/utils/ukey';
import resultApi from '@/api/components.js';
import singleTransfer from '@/views/components/singleTransfer';

export default {
  components: {
    singleTransfer, // 普通转账
  },
  data() {
    return {
      payer: this.getData() || {},
      isLoading: false,
      showUkey: false,
      ukeyValue: '',
    };
  },
  methods: {
    onSubmit() {
      // 跳过ukey的测试代码
      this.isLoading = true;
      return resultApi.getResDetail(this.payer).then((result) => {
        this.isLoading = false;
        this.setData({
          ...this.payer,
          resultInfo: result.data,
        });
        this.$router.replace({
          name: 'transferRemit-singleTransfer-singleTransferRes',
        });
      });

      // judgeOneEnv(this).then((res) => {
      //   this.showUkey = res;
      // });
    },
    verification() {
      // 验证ukey密码
      verifyPIN(this, this.ukeyValue).then((res) => {
        if (res) {
          // usbKeySignData 需要传递 需要验签的数据   该函数成功后 返回的数据  res.signature 为USBkey 签名后的结果 需要上送至服务端
          usbKeySignData(this, { payer: this.payer }).then(async () => {
            // ukey校验成功后请求接口 创建转账 返回成功后执行下面操作 设置订单号 时间
            try {
              this.isLoading = true;
              let result = await resultApi.getResDetail(this.payer);
              this.setData({
                ...this.payer,
                resultInfo: result.data,
              });
              this.$router.replace({
                name: 'transferRemit-singleTransfer-singleTransferRes',
              });
            } catch (err) {
              this.$message.error(err.message);
            } finally {
              this.isLoading = false;
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.ukeyDialog {
  .ui-dialog .ui-dialog__body {
    padding: 38px 88px 43px;
  }
}
</style>
